<template>
  <div class="navbar">
    <ul>
      <li class="active">默认</li>
      <li class="sell">
        <span>销量</span>
        <span>
          <i class="upper"></i>
          <i class="down"></i>
        </span>
      </li>
      <li class="sell">
        <span>评分</span>
        <span>
          <i class="upper"></i>
          <i class="down"></i>
        </span>
      </li>
      <li class="sell">
        <span>价格</span>
        <span>
          <i class="upper"></i>
          <i class="down"></i>
        </span>
      </li>
      <li class="sell">
        <span>折扣</span>
        <span>
          <i class="upper"></i>
          <i class="down"></i>
        </span>
      </li>
    </ul>
    <div class="bookListCart">
      <img src="../../../static/index/ym.jpg" alt="">
      <div class="introduce">
        <h3>平视姚明</h3>
        <p class="author">王猛</p>
        <p class=‘ratings’>
          <span>评分：</span>
          <span>9.0</span>
        </p>
        <p class="oldPrice">
          <span class="mr26">原&nbsp;&nbsp;&nbsp;价</span>
          <span class="tit">¥38</span>
        </p>
        <p class="newPrice">
          <span class="mr16">二手价 </span>
          <span class="tit">¥4</span>
          <span class="discount">1.0折</span>
        </p>
      </div>
      <div class="operationBtns">
        <div class="buy">
          <span @click='buyNow'> <i></i>立即购买</span>
        </div>
        <div class="add">
          <span><i></i>加购物车</span>
        </div>
      </div>
      <div class="one">
        仅剩一本
      </div>
    </div>
    <div class="bookListCart">
      <img src="../../../static/index/ym.jpg" alt="">
      <div class="introduce">
        <h3>平视姚明</h3>
        <p class="author">王猛</p>
        <p class=‘ratings’>
          <span>评分：</span>
          <span>9.0</span>
        </p>
        <p class="oldPrice">
          <span class="mr26 ">原&nbsp;&nbsp;&nbsp;价</span>
          <span class="tit">¥38</span>
        </p>
        <p class="newPrice">
          <span class="mr16">二手价 </span>
          <span class="tit">¥4</span>
          <span class="discount">1.0折</span>
        </p>
      </div>
      <div class="operationBtns">
        <div class="buy">
          <span @click='buyNow'> <i></i>立即购买</span>
        </div>
        <div class="add">
          <span><i></i>加购物车</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {}
</script>
  <style lang="scss" scoped>
.navbar {
  padding: 30rpx 18rpx 18rpx 18rpx;
  ul {
    display: flex;
    justify-content: space-between;
    height: 78rpx;
    border-top: 1rpx solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    li {
      width: 20%;
      font-size: 28rpx;
      height: 78rpx;
      line-height: 78rpx;
      color: #2b2b2b;
      text-align: center;
      &.active {
        color: #c75050;
      }
      &.sell {
        span {
          position: relative;
          .upper {
            position: absolute;
            width: 22rpx;
            height: 14rpx;
            left: 2px;
            top: 4rpx;
            background: url('../../../static/fiction/upper.png') no-repeat;
            background-size: cover;
          }
          .down {
            position: absolute;
            width: 22rpx;
            height: 14rpx;
            left: 3px;
            bottom: 4rpx;
            background: url('../../../static/fiction/upper.png') no-repeat;
            background-size: cover;
            transform: rotate(180deg);
          }
        }
      }
    }
  }
  .bookListCart {
    padding-top: 30rpx;
    padding-bottom: 30rpx;
    border-bottom: 1px solid #d9d9d9;
    overflow: hidden;
    position: relative;
    .one {
      position: absolute;
      bottom: 30rpx;
      left: 0;
      height: 36rpx;
      width: 156rpx;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      font-size: 28rpx;
      line-height: 36rpx;
      text-align: center;
    }
    img {
      width: 156rpx;
      height: 220rpx;
      float: left;
      margin-right: 30rpx;
    }
    .introduce {
      float: left;
      h3 {
        font-size: 32rpx;
        color: #000;
      }
      .mr16 {
        margin-right: 16rpx;
      }
      .mr26 {
        margin-right: 26rpx;
      }
      .ratings {
        font-size: 28rpx;
        color: #333;
        margin-top: 20rpx;
        .mr16 {
          margin-right: 16rpx;
        }
      }
      .author {
        font-size: 28rpx;
        color: #333;
      }
      .oldPrice {
        font-size: 28rpx;
        color: #333;
        margin-right: 6rpx;
        .tit {
          display: inline-block;
          width: 96rpx;
          height: 36rpx;
          background: #e5e5e5;
          line-height: 36rpx;
          text-align: center;
          border-radius: 5px;
          font-size: 24rpx;
        }
      }
      .newPrice {
        font-size: 28rpx;
        color: #333;
        margin-right: 6rpx;
        .tit {
          display: inline-block;
          width: 96rpx;
          height: 36rpx;
          background: #c75050;
          line-height: 36rpx;
          text-align: center;
          border-radius: 5px;
          font-size: 24rpx;
          color: #fff;
        }
        .discount {
          color: #c78550;
          margin-left: 10rpx;
        }
      }
    }
    .operationBtns {
      float: right;
      margin-top: 96rpx;
      i {
        background: url('../../../static/index/card.png') no-repeat;
        display: inline-block;
        background-size: cover;
        margin-right: 8rpx;
        width: 28rpx;
        height: 20rpx;
      }
      .buy {
        width: 150rpx;
        height: 50rpx;
        border: 1px solid #c78550;
        font-size: 24rpx;
        line-height: 50rpx;
        margin-bottom: 20rpx;
        border-radius: 5px;
        span {
          display: inline-block;
          width: 100%;
          height: 100%;
          color: #c78550;
          text-align: center;
          position: relative;
          i {
            display: inline-block;
            background-size: cover;
            margin-right: 8rpx;
            width: 28rpx;
            height: 20rpx;
          }
        }
      }
      .add {
        width: 150rpx;
        height: 50rpx;
        background: #c78550;
        line-height: 50rpx;
        border: 1px solid #c78550;
        border-radius: 5px;
        span {
          color: #fff;
          font-size: 24rpx;
          display: inline-block;
          width: 100%;
          height: 100%;
          text-align: center;
          i {
            background: url('../../../static/index/addCart.png') no-repeat;
            height: 30rpx;
            width: 30rpx;
            background-size: cover;
            margin-top: 10rpx;
          }
        }
      }
    }
  }
}
</style>
  